<template>
  <el-dialog :title="$t('提现')" :visible.sync="centerDialogVisible" :close-on-click-modal="false"
    :close-on-press-escape="false" :show-close="true" :before-close="handleClose" append-to-body
    class="my-dialog__wrapper tixian-container" width="40%">
    <div class="tixian-content" v-if="lang==='zh'">
      <div class="type-box">
        <p style="margin-bottom: 0; margin-right: 1rem;font-size: 0.89rem;color: #666666;">
          {{ $t("类型") }}
        </p>
        <el-radio v-model="radio" label="5">{{ $t("微信") }}</el-radio>
        <el-radio v-model="radio" label="4">{{ $t("支付宝") }}</el-radio>
        <el-radio v-model="radio" label="2">{{ $t("银行卡") }}</el-radio>
      </div>
      <div v-if="radio == 5">
        <p class="title">请扫码下方二维码，登录微信小程序进行操作</p>
        <img style="width: 10rem;margin-top: 2rem;" src="../../../assets/img/mini-app.png" alt="" />
      </div>
      <div v-if="radio == 4">
        <p class="title">{{ $t("提现金额：") }}</p>
        <el-input :placeholder="0" v-model="price"></el-input>
        <p class="title">{{ $t("真实姓名：") }}</p>
        <el-input :placeholder="$t('请输入支付宝用户的真实姓名')" v-model="name"></el-input>
        <p class="title">{{ $t("支付宝账户/手机号：") }}</p>
        <el-input :placeholder="$t('请输入支付宝登录账号或手机号')" v-model="accountNo"></el-input>
      </div>
      <div v-if="radio == 2">
        <p class="title">{{ $t("提现金额：") }}</p>
        <el-input :placeholder="0" v-model="price"></el-input>
        <p class="title">{{ $t("持卡人真实姓名：") }}</p>
        <el-input :placeholder="$t('请输入持卡人真实姓名')" v-model="name"></el-input>
        <p class="title">{{ $t("银行卡号：") }}</p>
        <el-input :placeholder="$t('请输入银行卡号')" v-model="accountNo"></el-input>
        <p class="title">{{ $t("银行名称：") }}</p>
        <el-input :placeholder="$t('例如：中国工商银行')" v-model="bankName"></el-input>
        <p class="title">{{ $t("开户行名称：") }}</p>
        <el-input :placeholder="$t('请输入银行卡开户支行名称')" v-model="bankAddress"></el-input>
      </div>
      <!-- <p class="title">{{ $t("提现金额") }}</p>
      <el-input :placeholder="0" v-model="price"></el-input>
      <p class="title">{{ $t("提现账户") }}</p>
      <div class="bind-content" v-if="radio == 5">
        <img src="../../../assets/img/wxpay.jpg" alt="" />
        <p>{{ $t("微信支付") }}</p>
        <div v-if="wxInfo" class="wx-info">
          <img :src="wxInfo.avatar" alt="" />
          <span>{{ wxInfo.nickname }}</span>
        </div>
        <div class="btn" @click="bindWx" v-if="!wxInfo">{{ $t("绑定") }}</div>
        <div class="jie-btn" @click="unBind" v-if="wxInfo">
          {{ $t("解绑") }}
        </div>
      </div>
      <div class="bind-content" v-if="radio == 4">
        <img src="../../../assets/img/zfbpay.jpg" alt="" />
        <p>{{ $t("支付宝支付") }}</p>
        <div class="btn">{{ $t("绑定") }}</div>
      </div>
      <div class="bind-content" v-if="radio == 2">
    
      </div> -->
    </div>
    <div class="tixian-content" v-else>
      <div class="type-box">
        <p style="margin-bottom: 0; margin-right: 1rem;font-size: 0.89rem;color: #666666;">
          {{ $t("类型") }}
        </p>
        <el-radio v-model="radio" label="6">{{ $t("PayPal") }}</el-radio>
      </div>
      <div v-if="radio == 6">
        <p class="title">{{ $t("提现金额：") }}</p>
        <el-input :placeholder="0" v-model="price"></el-input>
        <p class="title">{{ $t("PayPal账户：") }}</p>
        <el-input :placeholder="$t('请输入PayPal登录邮箱账号')" v-model="accountNo"></el-input>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">{{
        $t("取 消")
      }}</el-button>
      <el-button type="primary" v-if="radio != 5" style="width: 5rem;" v-loading="isLoading" @click="handleDone">{{
        $t("确认提现")
      }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import api from "@/api/personcenter.js";
import myRate from "../../../components/my-rate.vue";
export default {
  components: {
    myRate,
  },
  data() {
    return {
      centerDialogVisible: false,
      isLoading: false,
      lang: null,
      radio: "6",
      price: "",
      accountNo: "",
      name: "",
      bankName: "",
      bankAddress: "",
      wxInfo: "",
    };
  },
  methods: {
    openDialog(lang) {
      this.lang = lang;
      this.radio = lang === 'zh' ? "5" : "6";
      this.centerDialogVisible = true;
      this.price = "";
      this.accountNo = "";
      this.name = "";
      this.bankName = "";
      this.bankAddress = "";
      this.wxInfo = "";
      this.getBind();
    },
    handleClose(done) {
      this.$confirm(this.$t("确认关闭？"))
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    async handleDone() {
      this.$confirm(this.$t("确认提现?"))
        .then(async (_) => {
          let params = {
            type: this.radio,
            price: this.price * 100,
            name: this.name,
            accountNo: this.accountNo,
            bankName: this.bankName,
            bankAddress: this.bankAddress
          };
          this.isLoading = true;
          let res = await this.$http.post(api.createWithdraw, params, {
            headers: {
              lang: this.lang,
            },
          });
          this.isLoading = false;
          if (res && res.code == 0) {
            this.$message.success("提交成功");
            this.$emit("initUser");
            this.centerDialogVisible = false;
          } else {
            this.$message.error(res.msg || this.$t("网络错误"));
          }
        })
    },
    unBind() {
      this.$confirm(this.$t("确认解绑?"))
        .then(async (_) => {
          let res = await this.$http.delete(api.unBind, {
            data: {
              type: 32,
              openid: this.wxInfo.openid,
            },
          });
          if (res && res.code == 0) {
            this.$message.success(this.$t("解绑成功"));
            this.wxInfo = "";
          } else {
            this.$message.error(res.msg || this.$t("网络错误"));
          }
        })
        .catch((_) => { });
    },
    async getBind() {
      let res = await this.$http.get(`${api.getBind}?type=32`);
      if (res && res.code == 0) {
        this.wxInfo = res.data;
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
    async bindWx() {
      let res = await this.$http.get(
        // `${api.socialRedirect}?type=32&redirectUri=${this.$store.state.baseURL + '/#/invite'}`
        `${api.socialRedirect}?type=32&redirectUri=https://www.rebirthealth.com/%23/authbind`
      );
      if (res && res.code == 0) {
        location.href = res.data;
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
  },
};
</script>
<style lang="scss">
.tixian-content {
  padding: 1rem 2rem;

  .title {
    font-size: 0.89rem;
    color: #666666;
    margin: 0.5rem 0 0.5rem 0;
  }

  .type-box {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
  }

  .el-radio__label {
    font-size: 1rem;
  }

  .el-input {
    .el-input__inner {
      width: 100%;
      border-color: #425f9b;
      height: 3.56rem;
      font-size: 0.89rem;
      background: transparent;
    }
  }

  .bind-content {
    display: flex;
    border: 0.01rem solid #425f9b;
    height: 3.56rem;
    border-radius: 0.166rem;
    align-items: center;
    padding: 0 2rem;
    font-size: 1rem;
    justify-content: space-between;

    .wx-info {
      display: flex;
      align-items: center;

      img {
        margin-right: 0.5rem;
      }
    }

    .btn {
      background: #339eff;
      border-radius: 0.06rem 0.06rem 0.06rem 0.06rem;
      font-size: 0.67rem;
      color: #ffffff;
      text-align: center;
      line-height: 1.56rem;
      height: 1.56rem;
      cursor: pointer;
      padding: 0 1rem;
    }

    .jie-btn {
      position: absolute;
      right: -2.5rem;
      top: 1rem;
      color: #339eff;
      text-decoration: underline;
      cursor: pointer;
      font-size: 0.89rem;
    }

    p {
      flex: 1;
    }

    img {
      width: 2rem;
      height: 2rem;
    }
  }
}
</style>
